<template>
  <div :style="'width:' + width">
    <el-form :label-width="labelWidth" label-position="left">
      <el-form-item :label="name" :required="required">
        <div style="display: flex">
          <el-select :disabled="disabled" style="flex: 1" v-model="data.id" filterable remote reserve-keyword
            placeholder="请输入（被保险人/处理机构/委托日期等）关键词搜索" :remote-method="getCases" :loading="loading" @input="chooseCase">
            <el-option v-for="item in cases" :key="item.CS_ID" :label="'[' + item.CS_ID + ']' + item.CS_DisplayName"
              :value="item.CS_ID"></el-option>
          </el-select>
          <el-button v-if="curCase" size="small" icon="el-icon-more" @click="detailVis = !detailVis"></el-button>
        </div>
      </el-form-item>
    </el-form>
    <div v-if="detailVis && curCase" style="margin: 20px">
      <div>所属部门：{{ curCase.DPM_Name }}</div>
      <div>流程：{{ curCase.FLOW_Name }}</div>
      <el-link style="color: blue" @click="toCase(curCase.CS_ID)">
        <i class="el-icon-search"></i>
        流水号：{{ curCase.CS_No }}
      </el-link>
      <div>案件名称：{{ curCase.CS_DisplayName }}</div>
      <div>案件状态：{{ curCase.CS_StatusDesc }}</div>
      <div>事故地区：{{ curCase.CS_AccidentAreaDesc }}</div>
      <div>事故时间：{{ curCase.CS_AccidentTime | formatTime }}</div>
      <div>事故原因：{{ curCase.CS_AccidentReason }}</div>
      <div>报销类型：{{ curCase.EXTY_EnumTxt }}</div>
      <div>估损金额：{{ curCase.CS_EstimateLossFee }}元</div>
      <div>定损金额：{{ curCase.CS_LossFee }}元</div>
      <div>报损金额：{{ curCase.CS_ReportLossFee }}元</div>
      <div>理算金额：{{ curCase.CS_AdjustmentFee }}元</div>
      <div>委托日期：{{ curCase.CS_DelegationDate | formatDate }}</div>
      <div>允许添加日志：{{ curCase.CS_AllowLog ? '允许' : '不允许' }}</div>
      <div>允许报销：{{ curCase.CS_AllowExpense ? '允许' : '不允许' }}</div>

      <div v-if="showEmployees && curCase.Employees.length > 0" style="margin-top: 40px">
        <el-divider>机构/公司/成员</el-divider>
        <el-table :data="curCase.Employees" stripe border highlight-current-row>
          <el-table-column label="身份" width="160">
            <template slot-scope="scope">
              {{ scope.row.CSEP_TypeDesc }}
            </template>
          </el-table-column>
          <el-table-column label="公司">
            <template slot-scope="scope">
              {{ scope.row.CMP_Name }}
            </template>
          </el-table-column>
          <el-table-column label="员工" width="100">
            <template slot-scope="scope">
              {{ scope.row.USR_Name }}
            </template>
          </el-table-column>
          <el-table-column label="联系方式" width="160">
            <template slot-scope="scope">
              {{ scope.row.USR_Phone | encodePhone }}
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div v-if="showBills && curCase.Bills.length > 0" style="margin-top: 60px">
        <el-divider>开票详情</el-divider>
        <el-table :data="curCase.Bills" stripe border highlight-current-row>
          <el-table-column label="编号" width="150">
            <template slot-scope="scope">
              {{ scope.row.CSB_No }}[{{ scope.row.CSB_ID }}]
            </template>
          </el-table-column>
          <el-table-column label="开票日期" width="160">
            <template slot-scope="scope">
              {{ scope.row.CSB_BillDate | formatDate }}
            </template>
          </el-table-column>
          <el-table-column label="购买方">
            <template slot-scope="scope">
              {{ scope.row.BuyCompanyName }}
            </template>
          </el-table-column>
          <el-table-column label="票税合计" width="100">
            <template slot-scope="scope">
              {{ scope.row.CSB_Fee }}
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- <div
        v-if="showContributions && curCase.Contributions.length > 0"
        style="margin-top: 60px"
      >
        <el-divider>案件贡献</el-divider>
        <el-table
          :data="curCase.Contributions"
          stripe
          border
          highlight-current-row
        >
          <el-table-column label="案件身份">
            <template slot-scope="scope">
              <el-tag type="default" v-if="!scope.row.CS_ContributionSured">
                待确认
              </el-tag>
              <el-tag type="success" v-if="scope.row.CS_ContributionSured">
                已确认
              </el-tag>
              {{ scope.row.CP_EmployeeTypeDesc }}
            </template>
          </el-table-column>
          <el-table-column label="成员">
            <template slot-scope="scope">
              {{ scope.row.USR_Name }}[{{ scope.row.USR_Phone }}]
            </template>
          </el-table-column>
          <el-table-column label="贡献项及权重">
            <template slot-scope="scope">
              {{ scope.row.CP_Name }} ：{{ scope.row.CP_Weight }}
            </template>
          </el-table-column>
          <el-table-column label="贡献率(%)">
            <template slot-scope="scope">{{ scope.row.CC_Score }}%</template>
          </el-table-column>
        </el-table>
      </div> -->

      <div v-if="showContributions && curCase.ContributionEmpGroups.length > 0" style="margin-top: 60px">
        <el-divider>案件贡献</el-divider>
        <el-table :data="curCase.ContributionEmpGroups" stripe border highlight-current-row>
          <el-table-column label="状态" width="80">
            <template slot-scope="scope">
              <el-tag type="default" v-if="!scope.row.CS_ContributionSured">
                待确认
              </el-tag>
              <el-tag type="success" v-if="scope.row.CS_ContributionSured">
                已确认
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="成员" width="80">
            <template slot-scope="scope">
              {{ scope.row.USR_Name }}
            </template>
          </el-table-column>
          <el-table-column label="联系方式">
            <template slot-scope="scope">
              {{ scope.row.USR_Phone }}
            </template>
          </el-table-column>
          <el-table-column label="贡献率汇总(%)" prop="IncomeSum">
            <template slot-scope="scope">
              {{ scope.row.ContributionSum }}%
            </template>
          </el-table-column>
          <el-table-column label="贡献明细" type="expand" width="80">
            <template slot-scope="scope">
              <div v-for="item in scope.row.Contributions" :key="item.CC_ID" style="margin: 5px">
                <span style="color: #888">贡献项：{{ item.CP_Name }}</span>
                <span style="margin-left: 20px; color: #888">
                  权重：{{ item.CP_Weight }}
                </span>
                <span style="margin-left: 20px; color: #888">
                  贡献率(%)：{{ item.CC_Score }}
                </span>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- <div
        v-if="showIncomes && curCase.Incomes.length > 0"
        style="margin-top: 60px"
      >
        <el-divider>提成详情</el-divider>
        <el-table
          :data="curCase.Incomes"
          stripe
          border
          highlight-current-row
          show-summary
        >
          <el-table-column label="应付款项" width="200">
            <template slot-scope="scope">
              <el-tag type="default" v-if="!scope.row.CS_IncomeSured">
                待确认
              </el-tag>
              <el-tag type="success" v-if="scope.row.CS_IncomeSured">
                已确认
              </el-tag>
              {{ scope.row.CI_Name }}
            </template>
          </el-table-column>
          <el-table-column label="成员" width="80">
            <template slot-scope="scope">
              {{ scope.row.USR_Name }}
            </template>
          </el-table-column>
          <el-table-column label="金额" width="80" prop="CI_Fee">
            <template slot-scope="scope">{{ scope.row.CI_Fee }}元</template>
          </el-table-column>
          <el-table-column label="计算公式">
            <template slot-scope="scope">
              {{ scope.row.CI_Expression }}
            </template>
          </el-table-column>
        </el-table>
      </div> -->
      <div v-if="showIncomes && curCase.IncomeEmpGroups.length > 0" style="margin-top: 60px">
        <el-divider>提成详情</el-divider>
        <el-table :data="curCase.IncomeEmpGroups" stripe border highlight-current-row show-summary>
          <el-table-column label="状态" width="80">
            <template slot-scope="scope">
              <el-tag type="default" v-if="!scope.row.CS_IncomeSured">
                待确认
              </el-tag>
              <el-tag type="success" v-if="scope.row.CS_IncomeSured">
                已确认
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="成员" width="80">
            <template slot-scope="scope">
              {{ scope.row.USR_Name }}
            </template>
          </el-table-column>
          <el-table-column label="联系方式">
            <template slot-scope="scope">
              {{ scope.row.USR_Phone }}
            </template>
          </el-table-column>
          <el-table-column label="应付款" prop="IncomeSum">
            <template slot-scope="scope">{{ scope.row.IncomeSum }}元</template>
          </el-table-column>
          <el-table-column label="应付明细" type="expand" width="80">
            <template slot-scope="scope">
              <div v-for="item in scope.row.Incomes" :key="item.CI_ID" style="margin: 5px">
                <span style="font-size: 14px">
                  【{{ item.CI_Name }}】{{ item.CI_Fee }}元
                </span>
                <span style="margin-left: 20px; color: #888">
                  {{ item.CI_Expression }}
                </span>
                <span style="margin-left: 20px; color: #888" v-if="item.CI_Remark">
                  备注:{{ item.CI_Remark }}
                </span>
              </div>
            </template>
          </el-table-column>
          <!-- <el-table-column label="计算公式">
            <template slot-scope="scope">
              {{ scope.row.CI_Expression }}
            </template>
          </el-table-column> -->
        </el-table>
      </div>

      <div v-if="showCosts && curCase.Costs.length > 0" style="margin-top: 60px">
        <el-divider>案件成本</el-divider>
        <el-table :data="curCase.Costs" stripe border highlight-current-row>
          <el-table-column label="费用项目" width="160">
            <template slot-scope="scope">
              {{ scope.row.CSC_Name ? scope.row.CSC_Name : '未知类型差旅票据' }}
            </template>
          </el-table-column>
          <el-table-column label="金额" prop="CSC_Fee" width="120">
            <template slot-scope="scope">{{ scope.row.CSC_Fee }}元</template>
          </el-table-column>
          <el-table-column label="备注">
            <template slot-scope="scope">
              {{ scope.row.CSC_Remark }}
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>
<script>
import { getCases, getCase } from '@/api/flowCenter/field/caseSelection'
export default {
  props: ['value', 'disabled', 'props', 'required', 'isBusiness'],
  data: function () {
    return {
      data: {
        id: null,
        displayName: '',
      },
      curCase: null,
      cases: [],
      loading: false,
      detailVis: true,
    }
  },
  computed: {
    myprops() {
      return this.props ? this.props : []
    },
    name() {
      let val = this.myprops.find((x) => x.FLPR_Code == 'name')
      if (val) {
        if (this.isBusiness) {
          return val.BFFP_Value ? val.BFFP_Value : '案件'
        } else {
          return val.FFLP_Value ? val.FFLP_Value : '案件'
        }
      }
      return '案件'
    },
    labelWidth() {
      let val = this.myprops.find((x) => x.FLPR_Code == 'labelWidth')
      if (val) {
        if (this.isBusiness) {
          return val.BFFP_Value ? val.BFFP_Value : '140px'
        } else {
          return val.FFLP_Value ? val.FFLP_Value : '140px'
        }
      }
      return '140px'
    },
    width() {
      let val = this.myprops.find((x) => x.FLPR_Code == 'width')
      if (val) {
        if (this.isBusiness) {
          return val.BFFP_Value ? val.BFFP_Value : '100%'
        } else {
          return val.FFLP_Value ? val.FFLP_Value : '100%'
        }
      }
      return '100%'
    },
    caseRange() {
      let val = this.myprops.find((x) => x.FLPR_Code == 'caseRange')
      if (val) {
        if (this.isBusiness) {
          return val.BFFP_Value ? val.BFFP_Value : 'department'
        } else {
          return val.FFLP_Value ? val.FFLP_Value : 'department'
        }
      }
      return 'department'
    },
    showEmployees() {
      let val = this.myprops.find((x) => x.FLPR_Code == 'showEmployees')
      if (val) {
        if (this.isBusiness) {
          return val.BFFP_Value == 'true' || val.BFFP_Value == true
            ? true
            : false
        } else {
          return val.FFLP_Value == 'true' || val.FFLP_Value == true
            ? true
            : false
        }
      }
      return false
    },
    showContributions() {
      let val = this.myprops.find((x) => x.FLPR_Code == 'showContributions')
      if (val) {
        if (this.isBusiness) {
          return val.BFFP_Value == 'true' || val.BFFP_Value == true
            ? true
            : false
        } else {
          return val.FFLP_Value == 'true' || val.FFLP_Value == true
            ? true
            : false
        }
      }
      return false
    },
    showBills() {
      let val = this.myprops.find((x) => x.FLPR_Code == 'showBills')
      if (val) {
        if (this.isBusiness) {
          return val.BFFP_Value == 'true' || val.BFFP_Value == true
            ? true
            : false
        } else {
          return val.FFLP_Value == 'true' || val.FFLP_Value == true
            ? true
            : false
        }
      }
      return false
    },
    showIncomes() {
      let val = this.myprops.find((x) => x.FLPR_Code == 'showIncomes')
      if (val) {
        if (this.isBusiness) {
          return val.BFFP_Value == 'true' || val.BFFP_Value == true
            ? true
            : false
        } else {
          return val.FFLP_Value == 'true' || val.FFLP_Value == true
            ? true
            : false
        }
      }
      return false
    },
    showCosts() {
      let val = this.myprops.find((x) => x.FLPR_Code == 'showCosts')
      if (val) {
        if (this.isBusiness) {
          return val.BFFP_Value == 'true' || val.BFFP_Value == true
            ? true
            : false
        } else {
          return val.FFLP_Value == 'true' || val.FFLP_Value == true
            ? true
            : false
        }
      }
      return false
    },
    logDisable() {
      let val = this.myprops.find((x) => x.FLPR_Code == 'logDisable')
      if (val) {
        if (this.isBusiness) {
          return val.BFFP_Value == 'true' || val.BFFP_Value == true
            ? true
            : false
        } else {
          return val.FFLP_Value == 'true' || val.FFLP_Value == true
            ? true
            : false
        }
      }
      return false
    },
    expenseDisable() {
      let val = this.myprops.find((x) => x.FLPR_Code == 'expenseDisable')
      if (val) {
        if (this.isBusiness) {
          return val.BFFP_Value == 'true' || val.BFFP_Value == true
            ? true
            : false
        } else {
          return val.FFLP_Value == 'true' || val.FFLP_Value == true
            ? true
            : false
        }
      }
      return false
    },
  },
  methods: {
    toCase(caseId) {
      this.$router.push({
        name: 'caseInfoPage',
        query: { caseId },
      })
    },
    getCases(keyword) {
      if (keyword.length >= 2) {
        this.loading = true
        getCases({
          keyword,
          logDisable: this.logDisable,
          expenseDisable: this.expenseDisable,
        }).then(({ data }) => {
          this.cases = data
          this.loading = false
        })
      }
    },
    chooseCase(val) {
      getCase(val).then(({ data }) => {
        this.curCase = data
        this.input()
      })
    },
    input() {
      this.data.id = this.curCase.CS_ID
      this.data.displayName =
        '【' + this.curCase.CS_No + '】' + this.curCase.CS_DisplayName
      this.$emit('input', JSON.stringify(this.data))
      this.$emit('display', this.data.displayName)
    },
  },
  mounted: function () {
    if (this.value && Object.keys(this.value).length) {
      this.data = JSON.parse(this.value)
      if (this.data.id) {
        getCase(this.data.id).then(({ data }) => {
          this.cases = [data]
          this.curCase = data
        })
      }
    }
  },
}
</script>
<style scoped>
.el-form-item {
  margin: 10px !important;
}
</style>